认识CSS
在设计网页时 您是否想过让自己的网页具有独特的风格呢，您是否烦恼那些烦人的HTML的设置呢，CSS的诞生解决了这些令您烦恼的设置
CSS即Cascading Style Sheet(级联样式单)的缩写，可以很方便的控制HTML标志，让您拥有独特的风格，字体的大小，字体的颜色，字体的类型，边框的类型，边框的大小，图象的大小,滤镜的使用...您是否心动了呢？没有关系 跟我学CSS您也可以成为网页高手您也可以做到您以往只能看得到而做不到的网页。
建立CSS
样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：
HTML标志{标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；...}
下面我们分别讲述：
HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是<P>、<Div>以及<Table>标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同，即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在Javascript中，是严格区分大小写的。
下面看一个具体的例子，比如我们对一个段落建立一个样式表：
P{background-color:#0000ff;font-size:12pt;color:#ffff00}，效果如下：
欢迎您进入“CSS基础学习”
上面我们分别设置了背景色，字体大小，以及字体颜色等。
为了看起来直观一些，上边的例子还可以写成:
P{background-color:#0000ff；
font-size:12pt；
color:#ffff00}
有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
如:H2{font-size:15pt；
font-family:'宋体'；
font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示，类似的情况还有关于背景方面的设置，在后面我们会一一详细讲解的。
引用CSS
在用CSS进行网站设计时，会遇到一种情况：相同的标志可能在不同的地方显示的效果不一样。怎么办呢，有一种办法即是采用上节所讲的直接插入式，逐个逐个地进行属性设置，如果该类标志比较少，这倒还可以；如果多了，可就有点令人厌烦了。
解决的办法就是采用样式类。
样式类，顾名思义是样式的分类，它可以根据不同的风格需要对某一类型的标志设置几种不同的CSS属性，也可以对整个风格分成几个类而不是只针对某一种类型的标志。
样式类可在外部文件与文档头方式中建立，而不能在直接插入式中建立。它的建立格式有以下两种：
第一种：
标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝
标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝
标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝
．．．．．
第二种：
．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝
在第一种方式中，我们可对某一类型的标志建立样式类，如：
P{font-family:'宋体'；font-size:10pt；font-color；Red}
P.isLeft{text-align:left}
P.isRight{text-align:right}
P.isCenter{text-align:center}
上边的例子中，所有段落标志的字体都为宋体，大小为10pt，颜色为红色，由于排版的需要又分成了三个样式类，分别具有不同的排版属性，从这个例子你可以看出层叠样式单之所以为层叠，其意义也在于此。
第二种方式的用处则在于它规定的样式类，没有特定于某一类标志，而是其它类型的标志都可以用。 如：
．isLeft{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:left}
．isRight{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:right}
．isCenter{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:center}
它规定了三个样式类，几乎所有的类型都可以引用它们。
有一点要注意，样式类与我们上节所讲的统一风格形式并不相冲突，样式类更多地强调了风格的异，而统一的设置形式则强调了风格的同。两者常相互结合，实现样式风格的叠加，使网页风格在整体统一的基础上而各自又绚丽多彩。
二、样式类的引用
样式类的引用很简单，只需在标志后面设置Class属性值为样式类名即可，引用格式如下：
<标志 Class="样式类名">
如我们上边用第一种方式建立的样式类在一个段落标志中引用，
<P Class="isLeft">你好，欢迎你来到网页陶吧</p>。
要再次提醒一下，用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中；而第二种则没有限制。
如果我们要动态改变某个引用了样式类的标志风格， 可通过脚本语言来修改标志对象的className属性，具体方式如下：
所要修改标志的标识号.style.className="样式类名"，如对一标志<p id="p1" class="isLeft">hello</p>修改为右排列的样式，在脚本语言中修改语句如下：
p1.style.className="isRight"
CSS单位
长度单位
一个长度的值由可选的正号" + "或负号" - "、接着的一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。
无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位:
em (em，元素的字体的高度)
ex (x-height，字母 "x" 的高度)
px (像素，相对于屏幕的分辨率)
绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位:
in (英寸，1英寸=2.54厘米)
cm (厘米，1厘米=10毫米)
mm (米)
pt (点，1点=1/72英寸)
pc (帕，1帕=12点)
------------------------------------------------------------------------
百分比单位
一个百分比值由可选的正号"＋"或负号"－"、接着的一个数字，还有百分号"%"。在一个百分比值之中是没有空格的。
百分比值是相对于其它数值，同样地用于定义每个属性。最经常使用的百分比值是相对于元素的字体大小。
------------------------------------------------------------------------
颜色单位
颜色值是一个关键字或一个RGB格式的数字。
Windows VGA(视频图像阵列)形成了16各关键字: aqua，black， blue，fuchsia，gray，green， lime，maroon，navy，olive， purple，red，silver，teal，white，and yellow。
RGB颜色可以有四种形式:
#rrggbb (如，#00cc00)
#rgb (如，#0c0)
rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0))
rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如，rgb(0%,80%,0%))
上述的例子指定同一颜色。
Douglas R. Jacobson先生还开发了速查手册RGB Color Chart (61 kB)。
------------------------------------------------------------------------
统一资源管理URLs
一个URL值的格式为 : url(foo)，foo是一个URL(统一资源管理，因特网的地址)。URL可以选择用单引号( ' )或者双引号( " )，并且，在URL之前或之后可以包含空格。
在URL中的括弧，逗号，空格，单引号，或双引号必须避开反斜杠。不完整的URLs被理解为样式表的源代码，而不是HTML源代码。
注意: Netscape Navigator 4.x 会错误地将不完整的URLs理解为相关的HTML源代码。注意到这个错误后，网页制作者应该在可能的地方使用完整的URLs。
例如:
BODY { background: url(path/picturefile) }
BODY { background: url(http://www.66788.net/images/678.gif) }
BODY { background: url("path/picturefile") }
BODY { background: url(\"Ulalume"\.png) } /* quotes in URL escaped
设置超级链接
其实超级链接的设置很简单只有下面三种方式：
链接有三种方式（可能说法有点错误 ：））
a:link{} 没有被访问过的链接
a:hover{} 正在被访问的链接
a:visited{} 已经被访问过的链接
在这里您可以设置你所需要的属性 比如：(把您的鼠标移到链接上去就清楚了)
欢迎您访问66788.NET！ 点击将进入网络互助主页！
注意：
这里的颜色和下划线你看了后面的文章就知道了
用的是text-decoration和color属性
字体属性
font-family
功能：用于改变HTML标志或元素的字体，你可设置一个可用字体清单。浏览器由前向后选用字体。
语法：{font-family:字体1,字体2, ... ,字体n}
------------------------------------ ------------------------------------
font-style
功能：使文本显示为扁斜体或斜体等表示强调 。
数值：normal - 正常；italic - 斜体；oblique - 偏斜体
------------------------------------ ------------------------------------
font-variant
功能：用于在正常与小型大写字母字体间切换。
数值：normal - 如果该标志继承父元素的 small-caps 设置，则关键字 normal 将 font-variant 设置为正常字体。
small-caps - 把小写字母显示为字体较小的大写字母。
------------------------------------ ------------------------------------
font-weight
功能：用于设置字体灰度，生成字体的深，浅版本。
数值：
正常灰度 - normal
相对灰度 - bold, bolder, light, lighter
梯度灰度 - 取值如下：100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。
------------------------------------ ------------------------------------
font-size
功能：用各种度量单位控制文本字体大小。
数值：有四种数值方式
绝对尺寸- 用具体字号表定义字体大小，可以取下列数值之一：xx - small, x-small, small, medium, large, x-large, xx-large。不同字体有不同的数值。
相对尺寸 - larger, smaller，产生的尺寸是相对于父容器字号而言的。
长度 - 用毫米(mm)，厘米(cm)，英寸(in)，点数(pt)，象素(px)，pica(pc)，ex(小写字母x的高度)或em(字体高度)作为度量单位。
百分比 - 相对于其父元素字体大小的百分比。
------------------------------------ ------------------------------------
font
功能：简写属性，提供了对字体所有属性进行设置的快捷方法。
语法：{font:字体属性1 字体属性2 ... 字体属性n}
数值：字体属性值为前面已列出的值，此外还可以设置行间距属性 line-height(见文本属性)，内容的顺序为：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性，属性值间用空格分开。
------------------------------------ ------------------------------------
letter-spacing
功能：控制文本元素字母间的间距，所设置的距离适用于整个元素。
数值：
normal - 正常间距，将字符间的间距复位为所有字体和字号的正常间距。
长度 - 设置字间距长度，正值表示加进父元素中继承的正常长度，负值则減去正常长度。在数字后指定度量单位如下：mm, cm, in, pt(点数), px(象素), pc(pica), ex(小写字母x的高度), em(大写字母M的宽度)。
------------------------------------ ------------------------------------
line-height
功能：设置元素中文本的行间距。
数值：
normal - 正常高度，通常为字体尺寸的 1-1.2倍，这是缺省设置。
数字 - 设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点，设置line-height为2，则间距20点。
长度 - 用标准度量单位设置间距，有些是绝对的，有些是相对的，详见letter-spacing中的説明。
百分比 - 也字体尺寸的百分比设置间距。
------------------------------------ ------------------------------------
text-align
功能：在元素框中水平对齐文本。
数值：
left - 左对齐
right - 右对齐
center - 居中
justify - 均匀分布， 生成等长的行
------------------------------------ ------------------------------------
text-decoration
功能：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。
数值：
none - 无文本修饰，缺省设置。
underline - 下划线。
overline - 上划线。
line-through - 删除线。
blink - 闪烁。
同一语句中可以组合多个关键字。
------------------------------------ ------------------------------------
text-indent
功能：文本缩排，用于段落的第一行缩排上。
数值：
长度 - 设置首行缩排的尺寸为指定度量单位，有些单位是相对的，有些则是绝对的，祥见 letter-spacing 属性的说明部分。
百分比 - 以行长的百分比设置首行缩排量。
------------------------------------ ------------------------------------
text-transform
功能：设置一个或几个元素的大写标准。
数值：
none - 不改变文本的大写小写。
capitalize - 元素中毎个单词的第一个字母用大写。
uppercase - 将所有文本设置为大写。
lowercase - 将所有文本设置为小写。
------------------------------------ ------------------------------------
vertical-align
功能：垂直对齐。
数值：
baseline - 对准两个元素的小写字母基准线。
sub - 下标。
super - 上标。
top - 顶部对齐。
text-top - 文本顶对齐。
middle - 中线对齐。
bottom - 底线对齐。
text-bottom - 字母底线对齐。
百分比 - 将线上元素基准线在父元素基准线基础上升降一定的百分比，和元素的 line-height 属性组合使用。
------------------------------------ ------------------------------------
word-spacing
功能：控制文本中元素单词间的间距。设置的间距适用于整个元素，不能在某个单词间插入更大或更小的间距。
数值：
normal - 正常间距。
长度 - 如果长度为正，则加进从父元素继承的正常长度，如果是负值，则减去。
边框属性
框填充属性
padding-bottom
padding-left
padding-top
padding-right
功能：毎个容器都有边框，这些属性设置边框与框內元素间的距离。
数值：
长度 - 设置相对或绝对值。在数字后指定度量单位如下：mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。
百分比 - 以父元素的百分比设置边框。
说明：填充值不能使用负值，但可以是小数。
框填充属性--- padding
功能：是个简写属性，用于设置上，下，左，右各个方向边框和内容元素的间距。
数值：同前。
说明：用单一值可以让毎边等距填充；如果用两个值，则第一个值用于上下填充，第二个值用于左右填充；如果用三个值，则赋于上边填充，左右填充和下边填充；如果用四个值，则分别用于上，右，下，左填充。可以混合数值类型。
框边框属性
border
功能：简写属性，设置所有边框属性。
数值：
border-width - 取值 thin, medium, thick 或指定长度。
border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset
border-color - 可用颜色名或RGB值。
说明：与其它简写属性不同的是，每个设置只能取一个值，这个属性均匀作用于框的各边。
border-top-width
border-bottom-width
border-right=width
border-left-width
功能：分别设置各个边框的厚度。
数值：
thin - 细边框。
medium - 中等线宽。
thick - 粗线。
长度 - 用相对或绝对单位设置边框宽度。
border-top
border-bottom
border-right
border-left
功能：这四个属性都是简写属性，分别设置上，下，右，左的边框属性。缺省情况下，边框没有样式设置。
数值：共有三个边框属性
border-width: 取值为 thin, medium, thick或指定长度。
border-style: 设置用于修饰边框的底纹。可以设置下列样式：none, dotted,doshed, solid, double, groove, ridge, inset, outset。
border-color: 设置边框颜色。
border-color
功能：简写属性，设置四个边框的颜色值。
数值：可以用颜色名或RGB值。如果指定单个颜色，则四个边框都显示为这个颜色；如果指定两个颜色，则顺序为上下，左右；如果指定三种颜色，则顺序为上，左右，下；如果指定四种颜色，则顺序为上，右，下，左。
说明：颜色名如下
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
对于RGB值，可用三种方法指定
#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)
框边框属性
border-style
功能：用于显示边框和指定边框样式。
数值：
none - 不显示边框，为缺省值
dotted - 点线
dashed - 虛线
solid - 实线
double - 双线
groove - 3D陷入线
ridge - 3D山脊狀线
inset - 使页面有沉入感
outset - 使页面有浮出感
说明：并非所有浏览器都能显示ridge, inset, outset 之类的样式，有些浏览器将所有边框都绘制成实线。
框边界属性
margin
功能：简写属性，用于設置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。这个区总是透明的，可以看到下面的页面背景。
数值：
长度 - 同前
百分比 - 以父元素宽度的百分比设置边界尺寸。
auto - 自动，这个设置取浏览器的缺省边界。
margin-bottom
margin-left
margin-right
margin-top
功能：这四个属性用来设置元素与其相邻元素间的距离，可以用长度或相对于其父文本的宽度的百分比来定义，也可以自动处理。
数值：
长度 - 设置元素相应边与框边缘之间的相对或绝对距离，有效单位为：mm, cm, in, px, pt, pica,ex, em ...
百分比 - 以父元素宽度的百分比设置边界尺寸。
auto - 自动，这个设置取浏览器的缺省边界。
框位置属性
height
功能：设置元素高度，浏览器按照这个高度调整图形。
数值：
长度 - mm, cm, px, pt, .....
auto - 自动。
框位置属性
width
功能：设置元素宽度，浏览器按照这个宽度调整图形。
数值：
长度 - mm, cm, in, px, pt, ......
百分比 - 将图形尺寸设置为父元素宽度的百分比。
auto - 自动调整
改变鼠标属性
在平常我们做的网页经常显示的鼠标形状是手型和文本型 对于其他的形状就无能为力了,那有可不可以显示成其他的形状呢？答案是肯定的使用CSS我们就可以用到15种形状的鼠标，觉得很复杂吗？其实是很简单的只要使用简单的CSS属性就可以作到了：
cursor:#(#表示以下的值)
hand是手型
crosshair是十字型
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
help是问号
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
例子如下(把鼠标移到下面的字母上就明白了)
手型 十字型 文本选择 等待 问号 向右的箭头
颜色和图象属性
color
功能：设置前景或元素的颜色。
数值：使用颜色关键字或RGB值。
background-color
功能：设置页面或页面元素的背景颜色。
数值：
颜色 - 可用颜色名或RGB值
transparent - 透明，使页面背景为缺省背景。
background-image
功能：定义背景图形。
数值：
none - 不用图形作背景
url - 提供图形文件的URL地址
说明：也可以包括background-color属性以便在找不到图形时代用
background-repeat
功能：控制图形背景是否重复排列。
数值：
repeat - 垂直和水平重复，缺省值
repeat-x - 水平重复
repeat-y - 垂直重复
no-repeat - 不重复
说明：这个属性和 background-image 和 background-position 属性一起使用。
background-attachment
功能：指定元素的背景是随元素一起滚动还是固定在页面某个位置上。
数值：
scroll - 随元素一起滚动
fixed - 固定
说明：
缺省值是 scroll，这个属性和 background-image 属性一起使用。
background-position
功能：用于在空间中定位元素背景
数值：
长度 - 相对或绝对单位设置元素框边缘的起点，并给出单位下的坐标。
百分比 - 用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点
垂直位置 - 设置竖直方向的起点，关键字为 top, center, bottom
水平位置 - 设置水平方向的起点，关键字 left, center, right
例如：top left, left top和0% 0% 都表示图形左上角从元素框左上角开始
background
功能：简写属性，可以设置所有背景属性。
数值：
background-attachment
background-color
background-image
background-position
background-repeat
有关上述数值的细节，见各个属性部分。
display
功能：改变元素的显示值，可以将元素类型线上，块和清单项目相互变换。
数值：
none - 不显示元素
block - 块显示，在元素前后设置分行符
inline - 删除元素前后的分行符，使其并入其它元素流中
list-item - 将元素设置为清单中的一行
说明：可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。
认识滤镜
您用过photoshop吗？我想大多数人都用过了，很多人都了解滤镜吧，至少也知道滤镜是怎么回事吧，相信吗？网页中同样是可以用滤镜的并且要是结合JAVASCRIPT使用时你一定会感到惊奇，不管你信不信我相信等你学会了所有的滤镜和JAVASCRIPT的时候你一定会相信的，
其实滤镜在CSS中的使用是利用一些数字来表示他的简便程度或者是用一些特定的词语来描述滤镜的使用的,下面是滤镜的书写格式：
filter:filtername(parameter)
看上去是不是太简单了呢 实际上也就是这么简单的
Alpha滤镜
语法:
{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,
startx=startx,starty=starty,finishx=finishx,finishy=finishy)}
“opacity"代表透明度水准。默认的范围是从0 到 100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。”finishopacity"是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0到 100。“style" 参数指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。”STARTX“和”STARTY“代表渐变透明效果的开始X和Y坐标。”FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 的坐标。
Chroma 滤镜
语法：
{filter:chroma(color=color)}
使用”Chroma"属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma 滤镜过滤掉兰色，就成了下面的样子。
filter:chroma(color=blue)
DropShadow 滤镜
语法：
{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}
“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。"Color"代表投射阴影的颜色，"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。"Positive"参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果
FlipH, FlipV 滤镜
语法：
{filter:filph} ,{filter:filpv}
分别是水平反转和垂直反转
Glow 滤镜
语法：
{filter:glow(color=color,strength)}
当对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。
filter:glow(color=red,strength=10) 后的效果
成功在望
filter:glow(color=#ffff00,strength=5) 后的效果
成功在望
好象可以把PhotoShop踹到一边了，是吗？
Mask 滤镜
语法：
{filter:mask(color=color)}
使用"MASK"属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。
Wave 滤镜
语法：
{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)}
"wave" 属性把对象按垂直的波形样式打乱。默认是“TRUE（非0）”，
“ADD”表示是否要把对象按照波形样式打乱，
“FREQ”是波纹的频率，也就是指定在对象上一共需要产生多少个完整的波纹，
“LIGHTSTRENGTH”参数可以对于波纹增强光影的效果，范围0----100，
“PHASE”参数用来设置正弦波的偏移量。
“STRENGTH”代表振幅大小。 |
